<template>
  <div class="file-display-container">
    <!-- 不支持的文件类型提示 -->
    <div v-if="!supportedTypes.includes(fileType)" class="empty-box">
      <i class="el-icon-warning"></i>
      <p>在线预览服务当前仅支持docx/xlsx/xls/pdf/jpg/jpeg/png/txt/mp4/mp3</p>
    </div>

    <!-- Word文档(.docx)展示 -->
    <VueOfficeDocx
      v-else-if="fileType === 'docx'"
      :src="fileSrc"
      class="file-content docx-content"
    />

    <!-- Excel文档(.xlsx)展示 -->
    <VueOfficeExcel
      v-else-if="fileType === 'xlsx'"
      :src="fileSrc"
      class="file-content xlsx-content"
    />
    <!-- Excel文件(.xls)展示 -->
    <div v-else-if="fileType === 'xls'" class="file-content xls-content">
      <div id="tabs-container">
        <div class="tabs-header">
          <!-- 动态生成标签页 -->
          <div
            :class="['tab-item', { active: activeSheetName === itemSheetName }]"
            v-for="(item, itemSheetName) in xlsData"
            :key="itemSheetName"
            @click="$emit('sheet-change', itemSheetName)"
          >{{ itemSheetName }}</div>
        </div>
        <div class="tabs-content">
          <!-- 显示当前选中的表格 -->
          <template v-if="activeSheetName && xlsData[activeSheetName]">
            <table v-if="xlsData[activeSheetName].length > 0" class="data-table">
              <thead>
                <tr>
                  <!-- 表头 -->
                  <th v-for="(item, key) in xlsData[activeSheetName][0]" :key="key">{{ key }}</th>
                </tr>
              </thead>
              <tbody>
                <!-- 表格内容 -->
                <tr v-for="row in xlsData[activeSheetName]" :key="row.id">
                  <td v-for="(cell, key) in row" :key="key">{{ cell }}</td>
                </tr>
              </tbody>
            </table>
            <div v-else>当前Sheet页无数据</div>
          </template>
          <div v-else>请选择一个Sheet页</div>
        </div>
      </div>
    </div>

    <!-- PDF文档展示 .pdf -->
    <VueOfficePdf v-else-if="fileType === 'pdf'" :src="fileSrc" class="file-content pdf-content" />

    <!-- 图片文件展示 'jpeg', 'png', 'jpg' 等img支持的标签 -->
    <div v-else-if="['jpeg', 'png', 'jpg'].includes(fileType)" class="file-content img-content">
      <img :src="fileSrc" :alt="fileName" />
    </div>

    <!-- 文本文件展示 txt文本 -->
    <div v-else-if="fileType === 'txt'" class="file-content txt-content">
      <pre><code>{{ txtData }}</code></pre>
    </div>

    <!-- 音频文件展示 -->
    <div v-else-if="fileType === 'mp3'" class="file-content audio-content">
      <audio :src="fileSrc" controls width="100%" height="30px">您的浏览器不支持 audio 标签。</audio>
    </div>

    <!-- 视频文件展示 -->
    <div v-else-if="fileType === 'mp4'" class="file-content video-content">
      <video controls width="auto" height="100%">
        <source :src="fileSrc" type="video/mp4" />您的浏览器不支持 Video 标签。
      </video>
    </div>
  </div>
</template>

<script setup name="FileDisplay">
import { defineProps, defineEmits } from "vue"
import { supportedTypes } from "./fileUtils"
import VueOfficeDocx from "@vue-office/docx"
import "@vue-office/docx/lib/index.css"
import VueOfficeExcel from "@vue-office/excel"
import "@vue-office/excel/lib/index.css"
import VueOfficePdf from "@vue-office/pdf"

/**
 * 组件属性定义
 */
const props = defineProps({
  // 文件源地址
  fileSrc: {
    type: String,
    required: true
  },
  // 文件名
  fileName: {
    type: String,
    default: ""
  },
  // 文件类型
  fileType: {
    type: String,
    required: true
  },
  // Excel活动工作表名称
  activeSheetName: {
    type: String,
    default: undefined
  },
  // Excel数据
  xlsData: {
    type: Object,
    default: () => ({})
  },
  // 文本数据
  txtData: {
    type: String,
    default: undefined
  }
})

/**
 * 组件事件定义
 */
const emit = defineEmits([
  "sheet-change" // Excel工作表切换事件
])
</script>

<style lang="scss" scoped>
$border-color: #e4e7ed;
$hover-bg: #f5f7fa;
$active-color: #409eff;

.file-display-container {
  width: 100%;
  height: 100%;

  .empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #909399;

    i {
      font-size: 64px;
      margin-bottom: 16px;
    }

    p {
      font-size: 16px;
      text-align: center;
      line-height: 1.5;
    }
  }

  .file-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: #f8f9fa;
    border-radius: 4px;

    // Excel内容样式
    &.xls-content {
      background-color: #fff;

      #tabs-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid $border-color;
        border-radius: 4px;

        .tabs-header {
          display: flex;
          gap: 5px;
          background-color: #f2f2f2;
          padding: 5px 5px 0;

          .tab-item {
            padding: 8px 16px;
            cursor: pointer;
            border: 1px solid $border-color;
            border-bottom: none;
            color: #606266;
            font-size: 14px;
            transition: all 0.3s;
            border-radius: 4px 4px 0 0;

            &.active {
              background-color: white;
              color: $active-color;
              font-weight: bold;
            }
          }
        }

        .tabs-content {
          flex: 1;
          padding: 10px;
          overflow: auto;
          border-top: 1px solid $border-color;

          .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;

            th,
            td {
              border: 1px solid $border-color;
              padding: 8px;
              text-align: left;
              min-width: 100px;
            }

            th {
              background-color: #f2f2f2;
              font-weight: bold;
            }

            tr:hover {
              background-color: $hover-bg;
            }
          }
        }
      }
    }

    // 图片内容样式
    &.img-content {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }

    // 文本内容样式
    &.txt-content {
      background-color: #fff;
      padding: 20px;

      pre {
        margin: 0;
        font-family: "Courier New", monospace;
        font-size: 14px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }

    // 音频内容样式
    &.audio-content {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
    }

    // 视频内容样式
    &.video-content {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;

      video {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>